<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="US-ASCII"%>
<%@ page import="structures.User"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="structures.AD"%>
<%@ page import="structures.ADsList"%>
<%@ page import="structures.GamifyResult"%>
<%	User user = (User) session.getAttribute("user");
	String error = (String) session.getAttribute("error");
	session.removeAttribute("error");

	ArrayList<GamifyResult> gamifyResults = (ArrayList<GamifyResult>) session.getAttribute("gamifyResult");
	session.removeAttribute("gamifyResult");
	ADsList adsSoldList = (ADsList) session.getAttribute("Sold");
	session.removeAttribute("Sold");
	ADsList adsAvailableList = (ADsList) session.getAttribute("Available");
	session.removeAttribute("Available");
	ADsList adsBoughtList = (ADsList) session.getAttribute("Bought");
	session.removeAttribute("Bought");
	String imageSource = "http://localhost:8080/DatabaseRESTWebService/GetADImage?idAdvertisement=";
	%>
<!DOCTYPE html>
<html lang="en">
  <head>
  	<meta name="google-signin-clientid" content="200831826702-javfst7ignashgjschib6osh972ruhhc.apps.googleusercontent.com" />
	<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read https://www.googleapis.com/auth/plus.me" />
	<meta name="google-signin-requestvisibleactions" content="http://schemas.google.com/AddActivity" />
	<meta name="google-signin-cookiepolicy" content="single_host_origin" />
	
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TiVendoIo - Profilo Utente</title>

    <!-- Bootstrap -->
    <link href="/serviceTechnologies/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
    <link href="css/style.css" rel = "stylesheet">
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="/serviceTechnologies/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript">
	$(document).ready(function(){
		$('#footer').load('/serviceTechnologies/common/footer.jsp');
		$('#navbar').load('/serviceTechnologies/common/navbar.jsp');
	});
	</script>
	
	<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '222737361268089',
          status     : false,
          xfbml      : true
        });
        
     	
        
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/it_IT/all.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
      
      
      function loginFB () {
    	 
    	  FB.login(function(response) {
    		   if (response.authResponse) {
    		     
    		     FB.api('/me', function(response) {
    		       window.location="./AddSocialNetworkLogin?idSocial=" + response.id + "&social=Facebook&idUser=" + <%=user.getId()%>;
    		       //location.href = "./FACEBOOKsignin?id=" + response.id;
    		     });
    		   } else {
    		     console.log('User cancelled login or did not fully authorize.');
    		   }
    		 });
    	  
      };
      
		
      (function() {
    	  var po = document.createElement('script');
    	  po.type = 'text/javascript'; po.async = true;
    	  po.src = 'https://apis.google.com/js/client:plusone.js';
    	  var s = document.getElementsByTagName('script')[0];
    	  s.parentNode.insertBefore(po, s);
    	})();
      
      function GLogin() {
    	  var initializedGoogleCallback = false;
    	  window.removeEventListener('load')
    	  gapi.auth.signIn({
    	    'callback': function (authResult) {
    	       if (!initializedGoogleCallback) {
    	         // after first call other will be ignored
    	         initializedGoogleCallback = true;
    	         if (authResult['status']['signed_in']) {
    	        	 gapi.client.load('plus','v1', loadProfile);
    	         } else {
    	        	 alert('Error');
    	         }
    	       }
    	    }
    	  });
    	}
      
  	function loadProfile(){
  	    var request = gapi.client.plus.people.get( {'userId' : 'me'} );
  	    request.execute(loadProfileCallback);
  	  }
  	function loadProfileCallback(obj) {
  		window.location="./AddSocialNetworkLogin?idSocial=" + obj['id'] + "&social=Google&idUser=" + <%=user.getId()%>;
  	  }
  
    </script>
	
	
	
  </head>
  <body>
	  	<!--  Facebook connection -->
	    <div id="fb-root"></div>
    
 	<div id="navbar"></div>
   <div class="container">
   <!-- Qui i dati dell'utente con il pulsante di modifica -->

	<div class="row">
		<div class = "col-md-3"></div>
	    <div class="col-md-3">
	    	<img src="http://www.localcrimenews.com/wp-content/uploads/2013/07/default-user-icon-profile.png"  alt="" class="img-rounded">
	    </div>
	    <div class="col-md-6">
	      	<blockquote>
	        	<p><%=user.getName()%> <%=user.getSurname()%></p>
	        	<small><cite title="Source Title"><%=user.getAddress()%>, <%=user.getCity()%>  <i class="glyphicon glyphicon-map-marker"></i></cite></small>
	      	</blockquote>
	      	<p>
		        <i class="glyphicon glyphicon-envelope"></i> <%=user.getEmail()%> <br>
		        <i class="glyphicon glyphicon-euro"></i> <%=user.getPayPalEmail()%><br>
	      	</p>
	      	<button class="btn btn-default btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
				<span class="glyphicon glyphicon-pencil"></span>Modify Your Data
			</button>
			<div class="modal fade" id="myModal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title">Modify Your Data</h4>
						</div>
						<div class="modal-body">
							<form class="omb_loginForm" action="./ManageUser" autocomplete="off" method="POST">
			    
			    	<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-user"></i></span>
						<input type="text" class="form-control" name="name" placeholder="Name" value ="<%=user.getName()%>">
					</div>
					<span class="help-block"></span>
					
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-user"></i></span>
						<input type="text" class="form-control" name="surname" placeholder="Surname" value ="<%=user.getSurname()%>">
					</div>
					<span class="help-block"></span>
                    
                    <div class="input-group">
						<span class="input-group-addon"><i class="fa fa-home"></i></span>
						<input type="text" class="form-control" name="cap" placeholder="Cap" value ="<%=user.getCap()%>">
					</div>
					<span class="help-block"></span>
					
                    <div class="input-group">
						<span class="input-group-addon"><i class="fa fa-home"></i></span>
						<input type="text" class="form-control" name="city" placeholder="City" value ="<%=user.getCity()%>">
					</div>
					<span class="help-block"></span>
					
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-home"></i></span>
						<input type="text" class="form-control" name="address" placeholder="Address" value ="<%=user.getAddress()%>">
					</div>
					<span class="help-block"></span>
					
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
						<input type="text" class="form-control" name="payPalEmail" placeholder="PayPalEmail" value ="<%=user.getPayPalEmail()%>">
					</div>
					<span class="help-block"></span>
					
					<input type="hidden" name="idUser" value ="<%=user.getId()%>">
					
					<button class="btn btn-lg btn-primary btn-block" type="submit">Modify your data</button>
				</form>
						</div>
										      
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
	    </div>
 	</div>
   <br>
   <div class="row">
   		<div class="col-md-2"></div>
   		<div class= "col-md-8">

   			
   			
   		</div>
   </div>
   
   <!-- Form per collegare account -->
  	<div class="omb_login">
    	<h3 class="omb_authTitle">Link your social accounts</h3>
		<div class="row omb_row-sm-offset-3 omb_socialButtons">
			<%if(user.getIdFacebook()==null){ %>
	    	    <div class="col-xs-4 col-sm-2">
			        <a onclick="loginFB()"  class="btn btn-lg btn-block omb_btn-facebook">
				        <i class="fa fa-facebook visible-xs"></i>
				        <span class="hidden-xs">Facebook</span>
			        </a>
		        </div>
	        <%}else{ %>
	        	<div class="col-xs-4 col-sm-2">
			        <a  class="btn btn-lg btn-block omb_btn-facebook">
				        <i class="fa fa-facebook visible-xs"></i>
				        <span class="hidden-xs">Connected</span>
			        </a>
		        </div>
	        <%} %>
	        <%if(user.getIdTwitter()==null){ %>
        	<div class="col-xs-4 col-sm-2">
		        <a href="./TWITTERsignin?scope=addSocial&idUser=<%=user.getId()%>" class="btn btn-lg btn-block omb_btn-twitter">
			        <i class="fa fa-twitter visible-xs"></i>
			        <span class="hidden-xs">Twitter</span>
		        </a>
	        </div>	
	        <%}else{ %>
	        <div class="col-xs-4 col-sm-2">
		        <a class="btn btn-lg btn-block omb_btn-twitter">
			        <i class="fa fa-twitter visible-xs"></i>
			        <span class="hidden-xs">Connected</span>
		        </a>
	        </div>
	        <%} %>
	        <%if(user.getIdGoogle()==null){ %>
        	<div class="col-xs-4 col-sm-2">
		        <a onclick="GLogin()" class="btn btn-lg btn-block omb_btn-google">
			        <i class="fa fa-google-plus visible-xs"></i>
			        <span class="hidden-xs">Google+</span>
		        </a>
	        </div>
	        <%}else{ %>	
	        	<div class="col-xs-4 col-sm-2">
		        <a class="btn btn-lg btn-block omb_btn-google">
			        <i class="fa fa-google-plus visible-xs"></i>
			        <span class="hidden-xs">Connected</span>
		        </a>
	        	</div>
	        <%} %>
		</div>
		    	
	</div>
	
	<br>
	
	<div class="row" style = "overflow-x:scroll; ">
					<h3>BADGES achieved:</h3>
					<%if(gamifyResults==null||gamifyResults.size()==0){ %>
						<p align = "center">No badges achieved!!!!</p>
					<%}else{ %>
						<ul class="list-unstyled list-inline">
						<%for(int i=0; i< gamifyResults.size(); i++){ %>
							<li style = "text-align: center;">
							<p><%=gamifyResults.get(i).getBadgesName()%></p><br>
							<img src="<%=gamifyResults.get(i).getBadgesUrl()%>" class ="img-rounded" id="Image1" alt="" align="top" border="0" style="width:194px;height:162px;"><br>
							</li>
						<%}%>
						</ul>
					<%}%>
				<br>
	</div>
	
	<br>
	
	<div class="row">
		<ul class="nav nav-tabs">
		  <li class="active"><a href="#sold" data-toggle="tab">Sold Items</a></li>
		  <li><a href="#selling" data-toggle="tab">Selling Items</a></li>
		  <li><a href="#bought" data-toggle="tab">Bought Items</a></li>
		</ul>
		
		<div class="tab-content">
		  
							<div class="tab-pane active" id = "sold" style = "overflow-x:scroll; ">
  					<h3>Already Sold Items</h3>
		
					<%if(adsSoldList==null || adsSoldList.getAdsList().size()==0){ %>
						<p align = "center">No Ads in the database!</p>
					<%  }else{
			  		%>
					
			  		<ul class="list-unstyled list-inline">
			  		<%for(AD advertisement: adsSoldList.getAdsList()){ 
			  			%>
			  			<li>
			   				Title:<%=advertisement.getTitle()%><br>
			   				Description:<%=advertisement.getDescription()%><br>
			   				Price:<%=advertisement.getPrice()%><br>
							<img src="<%=imageSource + advertisement.getIdAdvertisement()%>" class = "img-rounded" id="Image1" alt="" align="top" border="0" style="width:194px;height:162px;"><br>
							<br>
							<a href="./ShowAD?idAdvertisement=<%=advertisement.getIdAdvertisement()%>&WikiInfo=true">
			  					<button class="btn btn-default btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Take a Look!</button>
			  				</a>
			  				<br>
			  						
			  			</li>	
			  		<%  }
					}
			  		%>
			  		</ul>
			  		
  		</div>
  		<div class="tab-pane" id = "selling" style = "overflow-x:scroll; ">
  					<h3>Still Available Items</h3>
		
					<%if(adsAvailableList==null || adsAvailableList.getAdsList().size()==0){ %>
						<p align = "center">No Ads in the database!</p>
					<%  }else{
			  		%>
					
			  		<ul class="list-unstyled list-inline">
			  		<%for(AD advertisement: adsAvailableList.getAdsList()){ 
			  			%>
			  			<li>
			  				
			   				Title:<%=advertisement.getTitle()%><br>
			   				Description:<%=advertisement.getDescription()%><br>
			   				Price:<%=advertisement.getPrice()%><br>
							<img src="<%=imageSource + advertisement.getIdAdvertisement()%>" class = "img-rounded" id="Image1" alt="" align="top" border="0" style="width:194px;height:162px;"><br>
							<br>
							<a href="./ShowAD?idAdvertisement=<%=advertisement.getIdAdvertisement()%>&WikiInfo=true">
			  					<button class="btn btn-default btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Take a Look!</button>
			  				</a>	
			  			</li>	
			  		<%  }
					}
			  		%>
			  		</ul>
			  		
  		</div>
  		<div class="tab-pane" id = "bought" style = "overflow-x:scroll; ">
  					<h3>Bought Items</h3>
		
					<%if(adsBoughtList==null || adsBoughtList.getAdsList().size()==0){ %>
						<p align = "center">No Ads in the database!</p>
					<%  }else{
			  		%>
					
			  		<ul class="list-unstyled list-inline">
			  		<%for(AD advertisement: adsBoughtList.getAdsList()){ 
			  			%>
			  			<li>
			   				Title:<%=advertisement.getTitle()%><br>
			   				Description:<%=advertisement.getDescription()%><br>
			   				Price:<%=advertisement.getPrice()%><br>
							<img src="<%=imageSource + advertisement.getIdAdvertisement()%>" class = "img-rounded" id="Image1" alt="" align="top" border="0" style="width:194px;height:162px;"><br>
							<br>
							<a href="./ShowAD?idAdvertisement=<%=advertisement.getIdAdvertisement()%>&WikiInfo=true">
			  					<button class="btn btn-default btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Take a Look!</button>
			  				</a>
			  				 		
			  			</li>	
			  		<%  }
					}
			  		%>
			  		</ul>
			  		
  		</div>
  		</div>
	</div>

    </div> <!-- End Container -->
 
 	<br>	
 	
 	<div id="footer">
      
    </div>
 	<!-- End footer -->
 	
 	<% if(error!=null){
 			if(error.equals("yes")){%>
 				<script type="text/javascript">alert("Error")</script>
 			<%}else {%>
 				<script type="text/javascript">alert("Done!")</script>
 			<% }
 		} %>
  </body>
 </html>